<template>
  <div>
    <el-dialog :visible.sync="formVisible" @close="handleCancel" width='654px' :show-close='false' class="dialog_details">
      <div slot="title" class="dialog-title">{{id?'修改简历':'添加简历'}}</div>
      <el-card class="el-card-border">
        <el-form :ref="formName" :label-position="labelPosition" :model="formFieldsData" label-width="120px" :rules="rules">
          <el-form-item label="账号" prop='mobile'>
            <el-input v-model="formFieldsData.mobile" :disabled='formFieldsData.request_type==2?true:false'></el-input>
          </el-form-item>
          <template v-if="formFieldsData.request_type==1">
            <el-form-item label="姓名" prop='full_name'>
              <el-input v-model="formFieldsData.full_name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop='age'>
              <div class="flex_box">
                <el-input v-model="formFieldsData.age" min='1' type='number'></el-input>
                <span class="suffix">岁</span>
              </div>
            </el-form-item>
            <el-form-item label="是否为保到岗" prop='is_protect'>
              <el-radio v-model="formFieldsData.is_protect" :label="1">是</el-radio>
              <el-radio v-model="formFieldsData.is_protect" :label="0">否</el-radio>
            </el-form-item>
          </template>
          <el-form-item label="职位类型" prop='postid'>
            <el-cascader
              v-model="formFieldsData.postid"
              :options="postTypeLists"
              :props='optionProps'
              :show-all-levels="false"
              placeholder='请选择职位类型'
              class="filter-item" 
              style="width:100%"
              @change="postChange"></el-cascader>
          </el-form-item>
          <div v-if="postType=='DRIVER_TYPE' || formFieldsData.deive_home_img || formFieldsData.deive_side_img">
            <el-form-item v-if="postType=='DRIVER_TYPE'" prop='workType'>
              <span slot="label"><i class="red">*</i> 工作类型：</span>
              <div class="flex_box">
                <p class="attr_item"
                  :class="formFieldsData.workType==item.value_id?'cur':''" 
                  @click="workTypeChange(item.value_id)" 
                  v-for="(item,index) in workTypeList" :key='index'>{{item.value_name}}</p>
              </div>
            </el-form-item>
            <template v-if="formFieldsData.request_type==1">
              <el-form-item>
                <span slot="label"><i class="red">*</i> 性别：</span>
                <el-radio v-model="formFieldsData.sex" label="0">保密</el-radio>
                <el-radio v-model="formFieldsData.sex" label="1">男</el-radio>
                <el-radio v-model="formFieldsData.sex" label="2">女</el-radio>
              </el-form-item>
              <el-form-item>
                <span slot="label"><i class="red"></i> 驾驶证号：</span>
                <el-input v-model="formFieldsData.drive_number"></el-input>
              </el-form-item>
              <el-form-item>
                <span slot="label"><i class="red">*</i> 准驾车型：</span>
                <div class="flex_box_wrap">
                  <p class="attr_item" 
                    :class="formFieldsData.driving_model==item.value_id?'cur':''" 
                    @click="carTypeChange(item.value_id)" 
                    v-for="(item,index) in drivingList" :key='index'>{{item.value_name}}</p>
                </div>
              </el-form-item>
              <el-form-item>
                <span slot="label"><i class="red">*</i> 驾龄：</span>
                <div class="flex_box">
                  <el-input v-model="formFieldsData.driving" min='0' type='number'></el-input>
                  <span class="suffix">年</span>
                </div>
              </el-form-item>
            </template>
          </div>
          <el-form-item label="工作经验：" prop='workExperience'>
            <div class="flex_box">
              <p class="attr_item" 
                :class="formFieldsData.workExperience==item.value_id?'cur':''" 
                @click="workExperienceChange(item.value_id)" 
                v-for="(item,index) in workExperienceList" :key='index'>{{item.value_name}}</p>
            </div>
          </el-form-item>
          <el-form-item label="期望工作地区：" prop='district'>
            <addr ref='addr' @addrChange='postaddrChange'></addr>
          </el-form-item>
          <salaryForm ref='salary' @salaryChange='salaryChange'></salaryForm>
          <template v-if="formFieldsData.request_type==1">
            <el-divider></el-divider>
            <div class="upimg_title"><p class="theme_btn">其他证件（选填）</p></div>
            <el-form-item label="驾驶证：" v-if="postType == 'DRIVER_TYPE'">
              <div class="flex_box_between">
                <el-upload action="" :show-file-list="false" :http-request="upImg1" class="photo_box">
                  <p class="img" :style="'background-image:url('+getImg(formFieldsData.deive_home_img)+')'"></p>
                  <el-button type='primary'>点击上传主页</el-button>
                </el-upload>
                <el-upload action="" :show-file-list="false" :http-request="upImg2" class="photo_box">
                  <p class="img" :style="'background-image:url('+getImg(formFieldsData.deive_side_img)+')'"></p>
                  <el-button type='primary'>点击上传副页</el-button>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="其他资格证：">
              <div class="flex_box_between">
                <el-upload action="" :show-file-list="false" :http-request="upImg3" class="photo_box">
                  <p class="img" :style="'background-image:url('+getImg(formFieldsData.qua_home_img)+')'"></p>
                  <el-button type='primary'>点击上传主页</el-button>
                </el-upload>
                <el-upload action="" :show-file-list="false" :http-request="upImg4" class="photo_box">
                  <p class="img" :style="'background-image:url('+getImg(formFieldsData.qua_side_img)+')'"></p>
                  <el-button type='primary'>点击上传副页</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取消</el-button>
        <el-button type="primary" @click="addSubmit" size='medium'>{{id?'确定':'发布'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addr from '@/components/addr/index.vue'
import formOperate from '@/layout/mixin/formOperate'
import salaryForm from '@/components/salary'
import {uploadImage,getCarcardInfo,addResume} from '@/api/talent.js'
export default {
  mixins: [formOperate],
  props:{
    postTypeLists:{
      type:Array,
      defalut:()=>{
        return []
      }
    }
  },
  name: 'Index',
  data() {
    return {
      optionProps: {
        value: 'value_id',
        label: 'value_name',
        children: 'child'
      },
      formName: 'resume',
      formFieldsData: {
        type:'',
        mobile:'',
        full_name:'',
        sex:'',
        age:'',
        is_protect:0,
        deive_home_img:'', // 驾驶证主页照片
        deive_side_img:'', // 驾驶证副页照片
        deive_json:{},// 识别驾驶证信息
        driving_model:'',
        drive_number:'',
        driving:'',
        qua_home_img:'',
        qua_side_img:'',
        attr_value_id:'',
        province:'',
        city:'',
        district:'',
        salary_type:1,
        min_money:'',
        max_money:'',
        source:5,
        work_exper:'',
        request_type:2,
        postid:'',
        workType:'',
        workExperience:''
      },
      rules:{
        full_name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        postid:[
          { required: true, message: '请选择职位类型', trigger: 'blur' }
        ],
        workExperience:[
          { required: true, message: '请选择工作经验', trigger: 'click' }
        ],
        district:[
          { required: true, message: '请选择期望工作地区', trigger: 'click' }
        ]
      },
      postType:'', // 职位类型type
      area:{}, // 工作城市
      user_id:''
    }
  },
  mounted() {
    this.GetAttrData('WORK_TYPE')
    this.GetAttrData('WORK_EXP')
  },
  methods: {
    // 显示
    show(request_type,item) {
      this.formVisible = true
      this.id = ''
      if (request_type == 1 && item) {
        this.id = item ? item.id : ''
      } else if (request_type == 2) {
        this.formFieldsData.mobile = item.user_info.mobile
      }
      this.formFieldsData.source = 5
      this.formFieldsData.request_type = request_type
      if (this.id) {
        this.$http.get('/profession/admin/resume/'+this.id).then(response => {
          let info = response.data
          this.user_id = info.user_id
          this.formFieldsData.full_name = info.user_info.full_name || ''
          this.formFieldsData.mobile = info.user_info.mobile || ''
          this.formFieldsData.age = info.user_info.age || ''
          this.formFieldsData.postid = this.getAttrId(info.value_list,'POST_TYPE')
          this.formFieldsData.workType = this.getAttrId(info.value_list,'WORK_TYPE').toString()
          if (this.workType) {
            this.postType = this.drivingType
          }
          this.formFieldsData.workExperience = this.getAttrId(info.value_list,'WORK_EXP').toString()
          this.formFieldsData.attr_value_id = info.attr_value_id
          this.formFieldsData.work_exper = info.work_exper
          this.formFieldsData.diy_post_type = info.diy_post_type
          this.formFieldsData.province = info.province
          this.formFieldsData.city = info.city
          this.formFieldsData.district = info.district
          this.formFieldsData.salary_type = info.salary_type
          this.formFieldsData.min_money = info.min_money
          this.formFieldsData.max_money = info.max_money
          this.formFieldsData.sex = info.user_info.sex
          this.formFieldsData.is_protect = info.user_info.is_protect
          this.formFieldsData.driving = info.user_info.driving
          this.formFieldsData.driving_model = info.user_info.driving_model
          this.formFieldsData.drive_number = info.user_info.drive_number
          this.formFieldsData.deive_home_img = info.user_info.deive_home_img
          this.formFieldsData.deive_side_img = info.user_info.deive_side_img
          this.formFieldsData.qua_home_img = info.user_info.qua_home_img
          this.formFieldsData.qua_side_img = info.user_info.qua_side_img
          this.area = {
            pid:info.province,
            cid:info.city,
            did:info.district || '',
            pname:info.province_name,
            cname:info.city_name,
            dname:info.district_name || ''
          }
          this.$nextTick(()=>{
            this.$refs.addr.updateData(this.area)
            this.$refs.salary.updateData(this.formFieldsData.salary_type,this.formFieldsData.min_money,this.formFieldsData.max_money)
          })
        })
      } else {
        this.postType = ''
        this.formFieldsData.deive_json = {}
        this.area = {
          pid:'',
          cid:'',
          did: '',
          pname:'',
          cname:'',
          dname:''
        }
        this.$nextTick(()=>{
          this.$refs.addr.updateData(this.area)
          this.$refs.salary.updateData(this.formFieldsData.salary_type,this.formFieldsData.min_money,this.formFieldsData.max_money)
        })
      }
    },
    // 职位类型选择
    postChange(e) {
      let idx1 = this.postTypeLists.findIndex(res=>{
        return res.value_id == e[0]
      })
      let postType = this.postTypeLists[idx1].value_type
      this.formFieldsData.postid = e[1]
      this.postType = postType
      this.formFieldsData.diy_post_type = ''
      if (this.postType == 'DRIVER_TYPE') {
        this.formFieldsData.type=1
      } else {
        this.formFieldsData.type=0
        this.postType = ''
        this.formFieldsData.workType = ''
        this.formFieldsData.deive_home_img = ''
        this.formFieldsData.deive_side_img = ''
        this.formFieldsData.deive_json = {}
        this.formFieldsData.driving_model = ''
        this.formFieldsData.drive_number = ''
        this.formFieldsData.driving = ''
      }
    },
    // 工作类型
    workTypeChange(id) {
      this.formFieldsData.workType = id
    },
    //准驾车型
    carTypeChange(id) {
      this.formFieldsData.driving_model = id
    },
    // 选择薪资
    salaryChange(val) {
      this.formFieldsData.salary_type = val.salary_type
      this.formFieldsData.min_money = val.min_money
      this.formFieldsData.max_money = val.max_money
    },
    // 工作经验
    workExperienceChange(id) {
      this.formFieldsData.workExperience = id
    },
    // 工作地址
    postaddrChange(val) {
      this.formFieldsData.province = val.provinceid
      this.formFieldsData.city = val.cityid
      this.formFieldsData.district = val.districtid
    },
    addSubmit() {
      let query = this.formFieldsData
      let arr = []
      if (query.postid) {
        arr.push(query.postid)
      }
      if (query.workType) {
        arr.push(query.workType)
      }
      if (query.workExperience) {
        arr.push(query.workExperience)
      }
      query.attr_value_id = arr.toString()
      let param = {}
      let user_info = {
        type:query.type,
        full_name:query.full_name,
        mobile:query.mobile,
        sex:query.sex,
        age:query.age,
        is_protect:query.is_protect,
        deive_home_img:query.deive_home_img, // 驾驶证主页照片
        deive_side_img:query.deive_side_img, // 驾驶证副页照片
        deive_json:JSON.stringify(query.deive_json),// 识别驾驶证信息
        driving_model:query.driving_model,
        drive_number:query.drive_number,
        driving:query.driving,
        qua_home_img:query.qua_home_img,
        qua_side_img:query.qua_side_img
      }
      let resume_info = {
        attr_value_id:query.attr_value_id,
        diy_post_type:query.diy_post_type,
        province:query.province,
        city:query.city,
        district:query.district,
        salary_type:query.salary_type,
        min_money:query.min_money,
        max_money:query.max_money,
        source:query.source,
        work_exper:query.work_exper
      }
      if (query.request_type == 1) {
        param = {
          user_info:JSON.stringify(user_info),
          resume_info:JSON.stringify(resume_info),
          mobile:query.mobile,
          request_type:query.request_type
        }
      } else {
        param = resume_info
        param['mobile'] = query.mobile
        param['request_type'] = query.request_type
        // param = {...query}
        // delete param.postid
        // delete param.workType
        // delete param.workExperience
      }
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          if (query.type==1 && query.driving_model == '') {
            this.$message.error('准驾车型不能为空');
            return
          }
          if (query.salary_type!=3 && query.min_money == '') {
            this.$message.error('请选择期望薪资');
            return
          }
          if (this.id) {
            let userParam = {
              mobile:this.formFieldsData.mobile
            }
            this.$http.put('/user/admin/user/'+this.user_id, userParam).then(() => {
              user_info['request_type'] = 1
              this.$http.put('/profession/admin/resume/'+this.user_id, user_info).then((response) => {
                resume_info['request_type'] = 2
                this.$http.put('/profession/admin/resume/'+this.id, resume_info).then((response) => {
                  this.$emit('success')
                  this.handleCancel()
                })
              })
            })
          } else {
            this.$http.post('/profession/admin/resume', param).then((response) => {
              this.$emit('success')
              this.handleCancel()
            })
          }
        } else {
          return false
        }
      })
    },
    upImg1(f) {
      this.upAxios(f,'deive_home_img')
    },
    upImg2(f) {
      this.upAxios(f,'deive_side_img')
    },
    upImg3(f) {
      this.upAxios(f,'qua_home_img')
    },
    upImg4(f) {
      this.upAxios(f,'qua_side_img')
    },
    upAxios(f,key) {
      let param = new FormData(); //创建form对象
      param.append('image',f.file);//通过append向form对象添加数据
      uploadImage(param).then((res)=>{
        if(res.code == 10000){
          this.formFieldsData[key] = res.data.path
          if (key == 'deive_home_img' || key == 'deive_side_img') {
            this.GetCarcardInfo(res.data.path,key == 'deive_home_img'?1:0)
            this.formFieldsData.type=1
          } else {
            this.formFieldsData.type=0
          }
        }else{
          this.$message.error('已超时，请重新上传');
        }
      })
    },
    GetCarcardInfo(img,data_carcard_type) {
      let param = {
        img_url:img,
        data_carcard_type:data_carcard_type
      }
      getCarcardInfo(param).then((res)=>{
        if(res.code == 10000){
          this.formFieldsData.deive_json = Object.assign(this.formFieldsData.deive_json, res.data);
          if (data_carcard_type == 1) {
            this.formFieldsData.full_name = res.data.name
            this.formFieldsData.sex = res.data.sex=='女'?'2':res.data.sex=='男'?'1':'0'
            let idx = this.drivingList.findIndex(item=>{
              return item.value_name == res.data.vehicle_type
            })
            this.formFieldsData.driving_model = this.drivingList[idx].value_id
            this.formFieldsData.drive_number = res.data.num
          }
        }else{
          this.$message.error(res.message);
        }
      })
    },
  },
  components:{
    addr,
    salaryForm
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/element-variables.scss';
  .attr_item{
    min-width: 80px;
    padding: 0 18px;
    border:1px solid #eee;
    margin: 0 10px 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .attr_item.cur{
    border-color:$--color-primary;
    background: url('~@/assets/images/icon1.png') no-repeat right bottom;
  }
  .red{
    color:#FF6767;
  }
  .photo_box{
    text-align: center;
    margin-right: 20px;
  }
  .photo_box .img{
    margin:0 auto 14px;
    width: 200px;
    height: 136px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
  }
  .upimg_title{
    border-bottom: 1px solid #eee;
    font-size: 14px;
    margin-bottom:40px;
    .theme_btn{
      width: 140px;
      height: 36px;
      line-height: 36px;
      background:$--color-primary;
      color:#fff;
      text-align: center;
    }
  }
</style>